<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">商品</label>
                <div class="common-search-conrol">
                    <input
                        type="text"
                        nz-input
                        placeholder="请输入"
                        [(ngModel)]="queryForm.name"
                    />
                </div>
            </div>
            
            <div class="common-form-item">
                <label class="common-search-label">69码</label>
                <div class="common-search-conrol">
                    <input
                        type="text"
                        nz-input
                        placeholder="请输入"
                        [(ngModel)]="queryForm.code"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">商品属性</label>
                <div class="common-search-conrol">
                    <input
                        type="text"
                        nz-input
                        placeholder="请输入"
                        [(ngModel)]="queryForm.attr"
                    />
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">品牌</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择"
                        [(ngModel)]="cacheData.brandIdList"
                        (ngModelChange)="onSelectBrandAll($event)">
                        <nz-option nzLabel="全部" nzValue="all"></nz-option>
                        <nz-option nzValue="{{ data.id }}" nzLabel="{{ data.name }}" *ngFor="let data of BrandList"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">分类</label>
                <div class="common-search-conrol">
                    <nz-tree-select
                        nzDefaultExpandAll
                        nzShowSearch
                        nzCheckable
                        nzCheckStrictly
                        nzHideUnMatched
                        nzPlaceHolder="请选择分类"
                        nzVirtualHeight="400px"
                        [nzMaxTagCount]="1"
                        [nzNodes]="GoodsTypeList"
                        [(ngModel)]="cacheData.typeList"
                        (ngModelChange)="onChangeTree($event)">
                    </nz-tree-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">新建时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.dateFormat"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" [nzLoading]="tableLoading" (click)="query()">查询</button>
                    <button nz-button nzType="default" (click)="resetTable()">重置</button>
                    <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
                        {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="pagination-wrap-position m-t-2">
    <div class="operation-wrap">
        <button nz-button nzType="primary" class="m-r-8" [routerLink]="['../warehouseGoodsAdd', 0]" *ngIf="permission.userPermission.has('stock:warehouseGoods:add')">新增商品</button>
        <button nz-button nzType="primary" class="m-r-8" (click)="synchro()" *ngIf="permission.userPermission.has('stock:warehouseGoods:goodsInfo')">同步商品信息</button>
        <button nz-button nzType="primary" (click)="synchroStore()" *ngIf="permission.userPermission.has('stock:warehouseGoods:inventory')">同步商品库存</button>
    </div>

    <div class="table-wrap p-t-15">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzScroll]="{ x: '1100px' }"
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableLoading"
            [nzData]="listOfData?.records"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="listOfData?.total"
            [nzPageIndex]="listOfData?.current"
            [nzPageSize]="listOfData?.size"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)">
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="120px" nzLeft>ID</th>
                    <th nzAlign="center" nzWidth="110px">图片</th>
                    <th nzAlign="center" nzWidth="130px">商品名称</th>
                    <th nzAlign="center" nzWidth="120px">编码</th>
                    <th nzAlign="center" nzWidth="220px">商品属性</th>
                    <th nzAlign="center" nzWidth="120px">预警值</th>
                    <th nzAlign="center" nzWidth="130px" (click)="onTableFilter('1')">
                        <i nz-icon class="m-r-3" nzType="exclamation-circle" nzTheme="outline" nz-tooltip nzTooltipTitle="所有品质总库存"></i>
                        <span>实际库存</span>
                        <span class="table-item">
                            <i nz-icon nzType="caret-up" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.whGoodsSort == 1 && queryForm.asc}"></i>
                            <i nz-icon nzType="caret-down" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.whGoodsSort == 1 && !queryForm.asc}"></i>
                        </span>
                    </th>
                    <th nzAlign="center" nzWidth="130px" (click)="onTableFilter('2')">
                        不良品库存
                        <span class="table-item">
                            <i nz-icon nzType="caret-up" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.whGoodsSort == 2 && queryForm.asc}"></i>
                            <i nz-icon nzType="caret-down" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.whGoodsSort == 2 && !queryForm.asc}"></i>
                        </span>
                    </th>
                    <th nzAlign="center" nzWidth="130px" (click)="onTableFilter('3')">
                        排队数量
                        <span class="table-item">
                            <i nz-icon nzType="caret-up" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.whGoodsSort == 3 && queryForm.asc}"></i>
                            <i nz-icon nzType="caret-down" nzTheme="outline" [ngClass]="{'caret-i' : queryForm.whGoodsSort == 3 && !queryForm.asc}"></i>
                        </span>
                    </th>
                    <th nzAlign="center" nzWidth="150px">69码</th>
                    <th nzAlign="center" nzWidth="150px">供应商</th>
                    <th nzAlign="center" nzWidth="130px">品牌</th>
                    <th nzAlign="center" nzWidth="150px">分类</th>
                    <th nzAlign="center" nzWidth="120px">进货周期</th>
                    <th nzAlign="center" nzWidth="120px" title="商品信息的同步状态">同步状态</th>
                    <th nzAlign="center" nzWidth="120px">状态</th>
                    <th nzAlign="center" nzWidth="200px" nzRight>操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr *ngFor="let data of basicTable.data; let index = index;">
                    <!-- id -->
                    <td nzAlign="center" nzLeft>{{data.id}}</td>
                    <!-- 图片 -->
                    <td nzAlign="center">
                        <img nz-image width="42px" height="42px" nzSrc="{{data.img}}" [nzFallback]="fallback" />
                    </td>
                    <!-- 商品名称 -->
                    <td nzAlign="left">{{data.name || '-'}}</td>
                    <!-- 编码 -->
                    <td nzAlign="center">{{data.whCode || '-'}}</td>
                    <!-- 商品属性 -->
                    <td nzAlign="center">{{data.attr ? data.attr : '-'}}</td>
                    <!-- 预警值 -->
                    <td nzAlign="center">{{data.earlyWarning ? data.earlyWarning : '-'}}</td>
                    <!-- 实际库存 -->
                    <td nzAlign="center">{{data.stock }}</td>
                    <!-- 不良品库存 -->
                    <td nzAlign="center">{{data.badStock ? data.badStock : 0 }}</td>
                    <!-- 排队数量 -->
                    <td nzAlign="center" class="{{ data.stock == 0 && data.lineupNumber > 0 ?'font_red':''}}">
                        {{data.lineupNumber ? data.lineupNumber : 0}}
                    </td>
                    <!-- 69码 -->
                    <td nzAlign="center">{{data.code}}</td>
                    <!-- 供应商 -->
                    <td nzAlign="center">{{data.supName ? data.supName : '-'}}</td>
                    <!-- 品牌 -->
                    <td nzAlign="center">{{data.brandName}}</td>
                    <!-- 分类 -->
                    <td nzAlign="center">{{data.typeName}}</td>
                    <!-- 进货周期 -->
                    <td nzAlign="center">{{data.purchaseDuration ? data.purchaseDuration+'天' : '-'}}</td>
                    <!-- 同步状态 -->
                    <td nzAlign="center"
                        class="{{data.syncState == 0 ? 'font_Yellow' : data.syncState == 1 ? 'font_Green' : 'font_red'}}"
                        title="商品信息的同步状态">
                        {{data.syncState == 0 ? '未同步' : data.syncState == 1 ? '同步成功' : '同步失败'}}
                    </td>
                    <!-- 状态-->
                    <td nzAlign="center" class="{{data.state == 0 ? 'font_Gray' : data.state == 1 ? 'font_Yellow' : data.state == 2 ? 'font_Green' : 'font_red'}}">
                        {{ data.stateText }}
                        <i nz-icon nz-tooltip nzType="exclamation-circle" nzTheme="outline" [nzTooltipTitle]="titleTemplate"
                            nzTooltipPlacement="right" *ngIf=" data.state == 3"></i>
                        <ng-template #titleTemplate>
                            <p>审核时间：{{data.auditTime}}</p>
                            <p>审核意见：{{data.auditDesc}}</p>
                        </ng-template>
                    </td>
                    <td nzAlign="center" nzRight>
                        <a nz-button nzType="link" [routerLink]="['../warehouseGoodsAdd', data.id]" *ngIf="permission.userPermission.has('stock:warehouseGoods:edit')">编辑</a>
                        <button nz-button nzType="link" [routerLink]="['../warehouseGoodsAdd', data.id]" *ngIf="permission.userPermission.has('stock:warehouseGoods:check')"
                            [disabled]="data.state != 1">审核</button>
                        <a nz-button nzType="link" nzDanger nz-popconfirm nzPopconfirmTitle="确认删除吗?" *ngIf="permission.userPermission.has('stock:warehouseGoods:delete')"
                            [nzIcon]="iconTpl" (nzOnConfirm)="confirm(data.id)">删除</a>
                        <ng-template #iconTpl>
                            <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                        </ng-template>
                    </td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>
